<template>
  <Tel
    :attributes="tableData"
    :events="tableEvents"
  >
    <template #com>
      <Pagination
        background
        :page="2"
        :limit="10"
        :total="20"
      />
    </template>
    {{ code }}
  </Tel>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Pagination from '@/components/Pagination/index.vue'
import { Attribute, Event } from './type'
import Tel from './template/Tel.vue'
export default defineComponent({
  name: 'ExamplePagination',
  components: {
    Pagination,
    Tel
  },
  setup() {
    const tableData: Array<Attribute> = [
      {
        argu: 'total',
        instruction: '总数量，必须',
        type: 'number',
        option: '-',
        default: '-'
      },
      {
        argu: 'page',
        instruction: '当前页码',
        type: 'number',
        option: '-',
        default: '1'
      },
      {
        argu: 'limit',
        instruction: '每页数量',
        type: 'number',
        option: '-',
        default: '20'
      },
      {
        argu: 'pageSize',
        instruction: '每页显示个数选择器的选项设置',
        type: 'number',
        option: '-',
        default: '[10,50,200]'
      },
      {
        argu: 'layout',
        instruction: '组件布局，子组件名用逗号分隔',
        type: 'string',
        option: '-',
        default: 'total, sizes, prev, pager, next, jumper'
      },
      {
        argu: 'background',
        instruction: '是否显示背景色',
        type: 'boolean',
        option: 'false,true',
        default: 'true'
      },
      {
        argu: 'autoScroll',
        instruction: '是否自动滚动',
        type: 'boolean',
        option: 'false,true',
        default: 'true'
      },
      {
        argu: 'inline',
        instruction: '是否以块显示，inline-block',
        type: 'boolean',
        option: 'false,true',
        default: 'false'
      },
      {
        argu: 'position',
        instruction: '内容对齐方式',
        type: 'string',
        option: 'left/center/right',
        default: 'center'
      }

    ]
    const tableEvents: Array<Event> = [
      {
        name: 'pagination',
        instruction: '返回page和limit',
        argu: ''
      }

    ]
    const code:string = `
<template>
    <Pagination
        background
        :page="1"
        :limit="10"
        :total="20"
      />
</template>    
<script lang='ts'>
import Pagination from '@/components/Pagination/index.vue'

<script>
    `
    return {
      tableData,
      tableEvents,
      code
    }
  }
})
</script>
